<template>
  <div class="container">
    <div
      class="bg"
      :style="{
        'background-image': `url(${require('@/assets/login.jpg')})`,
      }"
    ></div>
    <van-image
      class="logo"
      width="180px"
      height="180px"
      fit="contain"
      :src="require('../../assets/logo.png')"
    />
    <van-form @submit="onSubmit">
      <van-field
        v-model="formInfo.username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        left-icon="manager"
        :rules="[
          { required: true, message: '用户名不能为空' },
          { pattern: /^[a-zA-Z]\w{4,16}$/, message: '用户名必须是由字母、数字组成的4~16字符' },
        ]"
      />
      <van-field
        v-model="formInfo.password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        left-icon="lock"
        :rules="[{ required: true, message: '密码不能为空' }]"
      />
      <van-field
        v-model="formInfo.ackPassword"
        type="password"
        name="重复密码"
        label="重复密码"
        placeholder="请再次密码"
        left-icon="lock"
        :rules="[
          { required: true, message: '请再次输入密码' },
          {
            validator: () => {
              return formInfo.password == formInfo.ackPassword;
            },
            message: '重复密码需要与密码输入一致',
          },
        ]"
      />
      <van-field
        v-model="formInfo.nickname"
        type="text"
        name="用户昵称"
        label="用户昵称"
        placeholder="请输入用户昵称"
        left-icon="manager"
        :rules="[{ required: true, message: '用户昵称不能为空' }]"
      />
      <van-field
        v-model="formInfo.phone"
        type="text"
        name="手机号"
        label="手机号"
        placeholder="请输入手机号"
        left-icon="phone"
        :rules="[
          { required: true, message: '请输入手机号' },
        ]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >快速注册</van-button
        >
      </div>
    </van-form>
    <van-row type="flex" justify="space-between">
      <van-col span="12" style="text-align: left"> </van-col>
      <van-col span="12" style="text-align: right">
        <router-link to="/user/login" class="link">直接登录</router-link>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInfo: {
        username:'',
        password:'',
        ackPassword:'',
        nickname:'',
        phone:'',
        roleIds:[3]
      }, // 用于描述表单信息
      timeoutTask: null, // 用于防抖任务
    };
  },
  methods: {
    onSubmit() {
      console.log("submit", this.formInfo);
      let url = 'http://localhost:9080/users/add-new';
      let formInfo = this.qs.stringify(this.formInfo, {arrayFormat: 'repeat'});
      console.log('formInfo = ' + formInfo);
      this.axios.post(url, formInfo).then((response) => {
        let responseBody = response.data;
        console.log(responseBody);
        if (responseBody.state == 20000) {
          this.$toast.success('注册成功!');
          this.$router.replace("/user/login");
        }else{
          this.$toast.fail(responseBody.message);
        }
      });
    },
},
};
</script>

<style scoped>
/** 容器样式 */
.container {
  text-align: center;
  height: 100vh;
  background-size: cover;
}
.container .bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
}
.container .logo {
  margin-top: 60px;
}
.link {
  margin: 0px 20px;
  color: #333;
}
</style>

<style>
.van-field__left-icon .van-icon {
  margin-top: 2px !important;
}
</style>
